<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>添加账单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-box">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱*">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="用户备注">
                    <el-input v-model="form.remark"></el-input>
                </el-form-item>
                <el-form-item label="用户手机" >
                    <el-input v-model="form.mobile" ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button @click="handleBack">返回</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
    export default {
        data: function(){
            return {
                form: {
                    name: '',
                    mobile:'',
                    email:'',
                    remark:''
                }
            }
        },
        methods: {
            onSubmit() {
                let _self = this;
                _self.loading_start();

                _self.$axios.put(this.$baseUrl+'/users',_self.form).then((res)=>{
                    _self.loading_end();
                    if(res.data.code===1){
                        _self.$message({
                            type:'success',
                            message:res.data.message
                        });
                        _self.$router.back(-1)
                    }else{
                        _self.$message.error(res.data.message)
                    }
                });
                //this.$router.back(-1)
            },
            handleBack(){
                this.$router.back(-1)
            },
            loading_start(){
                this.loading=true;
            },
            loading_end(){
                this.loading=false;
            }
        }
    }
</script>